<!-- 我们的查询 -->

<template>
  <WebSearch>
    <template #btn>
      <ParamRadio v-if="param.hasType" bind="type" :dict="DICT.TYPE" isBtn />
      <BtnDownload @click="toExport" />
    </template>

    <ParamRadio bind="dateType" :dict="DICT.DATE" @change="changeDateType" />
    <ParamDateRange bind="startTime, endTime" history noClear @change="changeRange" />
  </WebSearch>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OurSearch',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixBase(), CORE.mixList(), CORE.mixLoad()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 页面
     */
    Page: () => 'Work',

    /**
     * 工作簿名称
     */
    sheetName() {
      const { DICT, param } = this
      const type = CORE.dict(DICT.TYPE, param.type)
      return type
    },

    /**
     * 文件前缀
     */
    filePre() {
      const name = CORE.MENU.current.name
      return this.param.hasType ? `${name} [${this.sheetName}]` : name
    },

    /**
     * 文件名称
     */
    fileName() {
      const { filePre, param } = this
      const start = CORE.dateStr(param.startTime)
      const end = CORE.dateStr(param.endTime)
      return `${filePre} [${start} 至 ${end}]`
    },

    /**
     * 报表组件
     */
    parentReport() {
      const { DICT, param, Page } = this
      const [, , code] = DICT.TYPE.find(([id]) => param.type === id)
      return CORE.componentParent(this, `${Page}${CORE.keyPre(code)}`, `Report${Page}`) || {}
    },

    /**
     * 左侧绘图
     */
    canvasLeft() {
      return this.getCanvas('left')
    },

    /**
     * 右侧绘图
     */
    canvasRight() {
      return this.getCanvas('right')
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    this.changeRange()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取绘图
     */
    getCanvas(half) {
      const { parentReport: { $refs = {} } } = this
      const EMPTY = { toDataURL: () => '' }

      const statisticRefs = ($refs.statistic || {}).$refs || {}
      const ref = statisticRefs[half]

      // 外层图表
      if (!ref || CORE.isEmpty(ref.$children)) return EMPTY

      // 简易图表
      const refChart = ref.$children[0].$el
      if (!refChart || CORE.isEmpty(refChart.children)) return EMPTY

      // 内容容器
      const refDiv = refChart.children[0]
      if (!refDiv || CORE.isEmpty(refDiv.children)) return EMPTY

      // 绘图元素
      const canvas = refDiv.children[0]
      return canvas || EMPTY
    },

    /**
     * 切换日期类型
     */
    changeDateType(type) {
      const [startTime, endTime] = this.getTimes(type)
      Object.assign(this.param, { startTime, endTime })
      this.toSearch()
    },

    /**
     * 切换日期范围
     */
    changeRange() {
      const { DICT, param, getTimes } = this
      const values = [param.startTime, param.endTime].join()

      for (const i in DICT.DATE) {
        const type = DICT.DATE[i][0]

        if (getTimes(type).join() === values) {
          param.dateType = type // 设置选中
          this.toSearch()
          return
        }
      }

      param.dateType = undefined // 重置选中
      this.toSearch()
    },

    /**
     * 其他查询
     */
    toSearch() {
      //
    },

    /**
     * 获取起止时间
     */
    getTimes(type) {
      let startTime
      if (type === 1) startTime = CORE.timeNum(CORE.today()) // 今天 00:00:00
      else if (type === 2) startTime = CORE.timeNum(CORE.weekMonday(CORE.today())) // 周一 00:00:00
      else if (type === 3) startTime = CORE.timeNum(CORE.today().slice(0, 7)) // 月初 00:00:00
      else startTime = CORE.timeNum(CORE.today().slice(0, 4)) // 年初 00:00:00

      const endTime = CORE.timeNum(CORE.today(1), -1) // 今天 23:59:59
      return [startTime, endTime]
    },

    /**
     * 导出
     */
    toExport() {
      const { type, startTime, endTime } = this.param
      const dateStr = `${CORE.dateStr(startTime)} 至 ${CORE.dateStr(endTime)}`
      const fileName = this.fileName
      const sheetName = this.sheetName
      const base64Left = this.canvasLeft.toDataURL('image/png').slice(22)
      const base64Right = this.canvasRight.toDataURL('image/png').slice(22)
      const { titleList: headers, arrayList: lists } = this.refTable.getData()

      Object.assign(this.downParam, { type, dateStr, fileName, sheetName, base64Left, base64Right, headers, lists })

      this.startDownload()
    },
  },
}
</script>
